<template>
<div>
  <h1>角色管理</h1>
  {{list}}
  <table>
    <tr>
      <td>角色</td>
      <td>操作</td>
    </tr>
    <tr v-for="i in list" :key="i">
      <td>
        {{i.name}}
      </td>
      <td>
        <van-button @click="update_role(i.id)">授权</van-button>
        <van-button>删除角色</van-button>
      </td>
    </tr>
  </table>
  <div>
    <van-popup v-model:show="show" style="width: 500px;height: 300px;font-size: 15px;padding: 10px">
     <div>
       <div style="float: left;width: 200px">
         <h3>有的</h3>
         <van-checkbox-group v-model="result" ref="checkboxGroup" v-for="i in dict" :key="i">
           <van-checkbox :name="i.value">{{i.desc}}</van-checkbox>
         </van-checkbox-group>
         <van-button @click="post_liulan()">授权角色权限</van-button>
       </div>
       <div>
         <div style="float: right;width: 200px">
           <h3>没有</h3>
           <van-checkbox-group v-model="result" ref="checkboxGroup" v-for="i in list_data" :key="i">
             <van-checkbox :name="i.key">{{i.label}}</van-checkbox>
           </van-checkbox-group>
           <van-button>删除角色权限</van-button>
         </div>
       </div>
     </div>

    </van-popup>
  </div>
</div>
</template>

<script>
export default {
name: "role_management",
  data(){
    return{
      list:[],
      value: [],
      // 已经有的权限
      list_data:[],
      show:false,
      // 没有的权限
      dict:[],
      checked:'',
      result:[],
      pid:''
    }
  },
  methods:{
    post_liulan(){
      console.log(this.result)
      this.myaxios('http://localhost:5000/post_liulan','post',{'pid':this.pid,'result':JSON.stringify(this.result)})
          .then(res=>{
            console.log(res)

          })
    },
    update_role:function (id){
      console.log(id)
      this.get_node(id)
      this.pid=id
      this.show=true
    },
  get_role(){
    this.myaxios('http://localhost:5000/get_userguan','get',{})
    .then(res=>{
      console.log(res)
      this.list=res.data.list
    })
  },
    get_node(id){
      this.myaxios('http://localhost:5000/get_node','get',{'id':id})
          .then(res=>{
            console.log(res)
            this.list_data=res.data.list
            this.dict=res.data.data
          })
    }
  },
  mounted() {
  this.get_role()

  }

}
</script>

<style scoped>

</style>
